<template>
  <div>
    <Top title="找回密码"></Top>
    <div class="phone">
      <input
        
        placeholder="请输入修改的密码"
        v-model="passWord"
      />
    </div>

    <div class="loginBtn" @click="modify">确定修改</div>
  </div>
</template>

<script>
import Top from "@/views/login/top";
import { Toast } from 'vant';
import 'vant/es/toast/style';
import { modifyPassWord} from "@/common/api/login.js";
export default {
  data() {
    return {
      passWord: "",
      userPwd: {
        rule: /^\w{6,12}$/,
        msg: "密码不能为空，并且要求6到12位",
      },
    };
  },
  components: {
    Top,
  },
  methods:{
      modify(){
          if(this.userPwd.rule.test(this.passWord)){
            
             modifyPassWord(this.$route.query.phoneNum,this.passWord).then(res=>{
                
                 Toast(res.data.msg);  
                 setTimeout(() => { 
                        this.$router.push({name:'loginIndex'})
                 }, 1000);
             })
          }else{
             Toast(this.userPwd.msg);   
          }
      }
  }
};
</script>

<style scoped lang='scss'>
.phone {
  width: 80%;
  margin: 10vw auto;
  input {
    width: 100%;
  }
}
.loginBtn {
  margin-bottom: 5vw;
  width: 80%;
  background-color: #b0352f;
  color: white;
  font-size: 0.4878rem;
  border: none;
  border-radius: 1vw;
  padding: 3vw 0;
  text-align: center;
  margin: 0 auto;
  margin-top: 50vw;
}
</style>